<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script> <!-- vue引入 -->
    <style>
        #root{
            width: 500px;
            height: fit-content;
            outline: 1px rgb(0, 0, 0) solid;
            position: absolute;
        }
        .basic{
            text-align: center;
        }
        .normal{
            background-color: rgba(255, 8, 0, 0.9);
        }
        .happy{
            background-color: rgba(3, 251, 255, 0.9);
            
        }
        .sad{
            background-color: rgba(106, 106, 106, 0.9);
        }
    </style>
    <script>
        Vue.config.productionTip=false; //阻止vue在启动时产生提示
        const vm = new Vue({
            //el: "#root",
            data:{
                name: "点击随机切换背景色",
                classMood: "normal", // 方式1,通过属性动态配置样式、对应页面  :class="classMood"
                classArr: ['normal','happy','sad'], //方式2 数组方式动态设置多个样式
                classObj: { //方式3、通过对象属性名控制、属性名必须与css名一样
                        normal:false,
                        happy:true, //true选中的样式
                        sad:false,
                },

                styleObj:{ //直接给标签设置style样式，方式1
                    fontSize: "18px",
                    fontWeight: 900, //字体加粗
                    color:'red',
                    backgroundColor: 'orange'
                },
                styleArr:[ //直接给标签设置style样式，方式2，用的不多知道一下就好
                    {
                        fontSize: "18px",
                        color:'blue'
                    },
                    {
                        backgroundColor: 'gray'
                    }
                ]
            },
            methods: {
                changeClassMood(){ //方式1的点击随机切换样式
                    const arr = ['normal','happy','sad'];
                    let classMoodStr;
                    do{
                        classMoodStr = arr[Math.floor(Math.random()*arr.length)];
                        if(classMoodStr != this.classMood) break;
                    }while(true);
                    this.classMood = classMoodStr;
                }
            },
            
        });
        
        window.onload = function() { //页面加载完成在加载该方法
            vm.$mount('#root');
        }
       
    </script>
</head>
<body>
    <div id="root">
        <div class="basic" :class="classMood" @click="changeClassMood">{{name}}</div>  <!-- 方式1, 变量属性方式设置class样式-->
        <div class="basic" :class="classArr">数组方式设置class多个样式</div> <!-- 方式2, 数组方式动态设置class多个样式 -->
        <div class="basic" :class="classObj">通过对象方式class设置样式</div> <!-- 方式3, 数组方式动态设置class多个样式 -->

        <div class="basic" :style="styleObj">通过对象方式style设置样式</div> <!-- 方式1, 对象方式动态设置style多个样式 -->
        <div class="basic" :style="styleArr">通过数组方式style设置样式</div> <!-- 方式2, 对象方式动态设置style多个样式 -->
    </div>
</body>
</html>